/**
*
* @title 生成弹出框
* @description 
*
*/

import React, { Component } from 'react';
import { base, ajax, toast } from 'nc-lightapp-front';
const {NCModal, NCButton, NCCheckbox} = base;
const {Header: ModalHeader, Body: ModalBody, Footer: ModalFooter} = NCModal;
import './Indeterminate.less';
import { REQUEST_URL, STATUS } from '../../constant';

class CCModel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkboxList: [{
                title: '销售人员',
                id: 1,
                checked: true
            }, {
                title: '非销售人员',
                id: 2,
                checked: false
            }]
        };
        this.onClose = this.onClose.bind(this);
    }

    onClose() {
        this.props.updateState({
            CCModelVisiable: false
        });
    }

    onOk(refObj){

        ajax({
            url: REQUEST_URL.createData,
            data: this.state.checkboxList,
            success: (res) => {
                toast({ color: STATUS.success });
                this.props.updateState({
                    CCModelVisiable: false
                });
            }
        });
    }

    onCheckAllChange = (checked) => {
        let checkboxList = this.state.checkboxList.map(item => {
            item.checked = checked;
            return item;
        });

        this.setState({
            checkboxList
        });
    };

    onChange = (id, checked) => {
        let checkboxList = [...this.state.checkboxList];

        checkboxList.forEach(item => {
            if (item.id === id) {
                item.checked = checked;
            }
        });

        this.setState({
            checkboxList
        });

        this.processIndeterminate();
    };

    processIndeterminate = () => {
        let { checkboxList } = this.state;
        let checkedList = this.state.checkboxList.filter(item => item.checked);

        return {
            checkedAll: checkedList.length === checkboxList.length,
            indeterminate: checkedList.length > 0 && checkedList.length < checkboxList.length
        };
    };

    render() {
        const { CCModelVisiable, retObj} = this.props;
        let { checkboxList,  } = this.state;
        let { checkedAll, indeterminate } = this.processIndeterminate();

        return (
            <div>
                <NCModal
                    show = {CCModelVisiable}
                    onHide={this.onClose}
                    //  bodyStyle={{ height: '700px' }}
                    >
                    <ModalHeader closeButton={true} draggable={true}>
                        <span>绩效系数生成</span>
                    </ModalHeader>
                    <ModalBody style={{ textAlign: 'center' }}>
                    <div style={{ width: 360, display: 'inline-block', textAlign: 'left' }}>
                        <NCCheckbox
                            indeterminate={indeterminate}
                            checked={checkedAll}
                            onChange={this.onCheckAllChange}
                            className='indeterminate'
                        >
                            全选
                        </NCCheckbox>
                    </div>
                    
                    {
                        checkboxList.map(item => {
                            return (
                                <div style={{ width: 360, display: 'inline-block', textAlign: 'left' }}>
                                    <NCCheckbox
                                        onChange={(checked) => {
                                            this.onChange(item.id, checked);
                                        }}
                                        checked={item.checked}
                                    >
                                        {item.title}
                                    </NCCheckbox>
                                </div>
                            );
                        })
                    }
                    

                    </ModalBody>
                    <ModalFooter>
                        <NCButton colors="primary" onClick={this.onOk.bind(this, retObj)}>确认</NCButton>
                        <NCButton onClick={this.onClose}>取消</NCButton>
                    </ModalFooter>
                </NCModal>
            </div>
        );
    }
}
export default CCModel;